<template>
	<view class="sort-cell" @contextmenu="handleRightClick">
		<view v-if="so <= 3" class="sort" :class="'sort-' + so">
			{{so}}
		</view>
		<view v-else class="sort">
			{{so}}
		</view>
		<view class="name">
			{{sType == 'all' ? info.nick_name : info.fan_nickname}}: {{info.coins}}票
		</view>
		
		<view class="bind-user" v-if="sType == 'normal'">
			<image class="bind-u-header" :src="info.anchor_avatar" mode=""></image>
			<view class="bind-uname">
				{{info.anchor_nick_name}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"sort-cell",
		props: {
			// f.user_id AS fan_user_id,
			//     f.nick_name AS fan_nickname,
			//     f.avatar AS fan_avatar,
			//     f.bind_uid AS bind_anchor_id,  -- 粉丝绑定的主播ID
			//     u.nick_name AS anchor_nick_name,   -- 主播昵称
			//     u.header AS anchor_avatar,        -- 主播头像
			//     SUM(g.gift_coins) AS coins,
			//     COUNT(g.id) AS gift_count
			sType: {
				type: String,
				default: 'normal'
			},
			info: {
				type: Object,
				default: null
			},
			so: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			 handleRightClick(e) {
				 if (this.sType == 'all') return
				e.preventDefault() // 阻止默认右键菜单
				uni.createSelectorQuery().in(this)
				    .select('.sort-cell')
				    .boundingClientRect(rect => {
				      if (rect) {
				        // 可以使用这些坐标做其他操作
						const x = rect.left + window.screenX;
						const y = rect.bottom + window.screenY;
				
						window.electronAPI.showBindTo(this.info.fan_user_id, this.info.bind_anchor_id, x, y)
				      }
				    })
				    .exec();
			},
			
			// 跨平台获取事件位置
			getEventPosition(e) {
			  // H5鼠标事件
			  if (e.clientX !== undefined) {
			    return { clientX: e.clientX, clientY: e.clientY };
			  }
			  // 小程序触摸事件
			  if (e.touches && e.touches[0]) {
			    return e.touches[0];
			  }
			  // 其他情况
			  return { clientX: 0, clientY: 0 };
			}
		}
	}
</script>

<style scoped>
	
	.sort-cell {
		display: flex;
		align-items: center;
		font-size: 14px;
		padding: 4px 5px;
		color: wheat;
		height: 20px;
	}
	
	.sort-cell:hover {
		cursor: pointer;
		background-color: #363643;
	}
	
	.sort {
		font-size: 12px;
		border-radius: 8px;
		background-color: wheat;
		color: #363643;
		font-weight: bold;
		/* width: 16px; */
		/* min-width: 16px; */
		height: 16px;
		padding-left: 4px;
		padding-right: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sort-1 {
		background-color: #ffbf00;
		color: #81670b;
	}
	
	.sort-2 {
		background-color: #bf610f;
		color: #6a3408;
	}
	
	.sort-3 {
		background-color: #cbcbcb;
		color: #444444;
	}
	
	.name {
		margin-left: 5px;
	}
	
	.bind-user {
		margin-left: 5px;
		display: flex;
		align-items: center;
		height: 20px;
		border-radius: 10px;
		background-color: #283353;
		padding-left: 2px;
		padding-right: 5px;
	}
	
	.bind-u-header {
		width: 16px;
		height: 16px;
		border-radius: 8px;
	}
	
	.bind-uname {
		margin-left: 3px;
	}

</style>